<template>
  <view class="app-container tenant-info-page">
    <view class="form-wrapper">
      <view class="list">
        <view class="item">
          <view class="label">
            <text>姓名</text>
          </view>
          <view class="value">
            <text>{{ userInfo.memberName }}</text>
          </view>
        </view>
        <view class="item">
          <view class="label">
            <text>联系手机</text>
          </view>
          <view class="value">
            <text>{{ userInfo.memberPhone }}</text>
          </view>
        </view>
        <view class="item">
          <view class="label">
            <text>身份证号</text>
          </view>
          <view class="value">
            <text>{{ userInfo.idCard }}</text>
          </view>
        </view>
        <view class="item">
          <view class="label">
            <text>关系</text>
          </view>
          <view class="value">
            <text>{{ userInfo.memberRelationName }}</text>
          </view>
        </view>
        <view class="item">
          <view class="label">
            <text>证件照片</text>
          </view>
          <view class="value">
            <image style="width: 100rpx;height: 100rpx;" :src="userInfo.facePhoto" mode="widthFix" lazy-load
                   @click="showImg"/>
          </view>
        </view>
      </view>
    </view>
    <view class="tips">实名认证后不能修改姓名和身份证号</view>

    <!--底部按钮：修改、删除-->
    <view class="btn-box">
      <view class="btn" @click="handleEdit(userInfo)">
        <u-button color="#FF7947" text="修改" style="margin-top: 40rpx"></u-button>
      </view>
      <view class="btn" @click="handleDelete(userInfo)">
        <u-button color="#FF7947" text="删除" style="margin-top: 40rpx" plain></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {memberDetail, deleteMember} from "@/api/manager/order";

export default {
  dicts: ['member_relation'],
  data() {
    return {
      memberId: "",
      userInfo: {},
    };
  },
  onLoad(options) {
    const memberId = options.memberId;
    if (memberId) {
      this.memberId = memberId
      // this.getMemberDetail(memberId)
    }
  },
  onShow() {
    this.getMemberDetail(this.memberId)
  },
  methods: {
    getMemberDetail(memberId) {
      if(!memberId) return
      memberDetail(memberId).then(res => {
        this.userInfo = res.data
        const memberRelation = res.data.memberRelation;
        if (memberRelation) {
          this.userInfo.memberRelationName = this.dict.type.member_relation.find(item => {
            return item.value === memberRelation
          }).label
        }
        // 是否可编辑 实名认证后不能修改姓名和身份证号
        // 实名状态：1已实名 2未实名
        this.userInfo.isEditable = this.userInfo.authState === '2'
      })
    },
    showImg() {
      uni.previewImage({
        urls: [this.userInfo.facePhoto],
      })
    },
    // 修改用户信息
    handleEdit(item) {
      this.$tab.navigateTo('/pages/manager/tenant/add-tenant?memberId=' + item.memberId)
    },
    // 删除用户
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该同住人吗？',
        success: (res) => {
          if (res.confirm) {
            deleteMember(item.memberId).then(res => {
              uni.showToast({
                title: res.msg || '删除成功',
                icon: 'none'
              })
              setTimeout(() => {
                // this.$tab.navigateBack()
                let params = {
                  // 页面标题
                  navigationBarTitleText: '删除成功',
                  // 标题
                  title: '删除成功',
                  //副标题
                  subTitle: '已删除同住人信息',
                  // 按钮组
                  buttonList: [
                    {
                      text: '返回房管家',
                      type: 'primary',
                      plain: false,
                      size: 'mini',
                      url: '/pages/manager/index',
                      urlType: 'switchTab'
                    },
                    {
                      text: '返回入住人信息',
                      type: 'primary',
                      plain: true,
                      size: 'mini',
                      url: '/pages/manager/tenant/tenant-list',
                      urlType: 'navigateBack'
                    }
                  ],
                }
                this.$tab.redirectTo("/pages/common/success/success" + "?params=" + JSON.stringify(params));
              }, 500)
            }).catch(err => {

            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tenant-info-page {
  padding: 20rpx;

  .form-wrapper {
    padding: 20rpx;
    background-color: #ffffff;

    .list {
      .item {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .label {
          width: 160rpx;

          text {
            font-size: 28rpx;
            color: #333333;
          }
        }

        .value {
          flex: 1;

          text {
            font-size: 28rpx;
            color: #666666;
          }
        }
      }
    }
  }

  .tips {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999999;
  }


  .btn-box {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .btn {
      width: 520rpx;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }

  }
}

</style>
